import { useRef } from 'react'
import classNames from 'classnames'
import useSlider from './useSlider'

const HueSlider = (props) => {
  const $el = useRef(null)
  const bar = useRef(null)
  const thumb = useRef(null)

  const vertical = false
  const [{ thumbLeft, thumbTop }, handleClick] = useSlider('hue', vertical, props, {
    $el,
    bar,
    thumb
  })

  return (
    <div
      ref={$el}
      className={classNames('color-hue-slider', {
        'is-vertical': vertical
      })}
    >
      <div className="color-hue-slider__bar" onClick={handleClick} ref={bar} />
      <div
        className="color-hue-slider__thumb"
        style={{ left: thumbLeft + 'px', top: thumbTop + 'px' }}
        ref={thumb}
      />
    </div>
  )
}

export default HueSlider
